<template>
    <div class="app-container">
        <!-- 查询条件表单 -->
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
            <el-form-item label="资产编号" prop="assetNo">
                <el-input v-model="queryParams.assetNo" placeholder="请输入资产编号" clearable style="width: 240px"
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="资产名称" prop="assetName">
                <el-input v-model="queryParams.assetName" placeholder="请输入资产名称" clearable style="width: 240px"
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="部门名称" prop="responsibilityDepartmentName">
                <el-input v-model="queryParams.responsibilityDepartmentName" placeholder="请输入部门名称" clearable
                    style="width: 240px" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="期间" prop="period">
                <el-date-picker v-model="queryParams.period" type="month" placeholder="选择期间" format="yyyy年MM月"
                    value-format="yyyy-M" @keyup.enter.native="handleQuery">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- 表格上方工具栏 -->
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                    v-hasPermi="['system:index:add']">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="success" plain icon="el-icon-printer" size="mini" @click="handleBatchPrint"
                    v-hasPermi="['system:index:print']">批量打印</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getAssetList"></right-toolbar>
        </el-row>

        <!-- 表格 -->
        <el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange" height="600">
            <el-table-column type="selection" width="55" fixed="left" />
            <el-table-column label="营运公司编号" prop="omCompanyId" width="100" fixed="left" />
            <el-table-column label="公司名称" prop="companyName" width="100" fixed="left" />
            <el-table-column label="资产编号" prop="assetNo" width="100" fixed="left" />
            <el-table-column label="资产名称" prop="assetName" width="150" />
            <el-table-column label="资产规格" prop="assetSpec" width="100" />
            <el-table-column label="资产类别名称" prop="assetCategoryName" width="100" />
            <el-table-column label="资产性质" prop="assetNature" width="80" />
            <el-table-column label="计量模式" prop="countWay" width="100" />
            <el-table-column label="资产状态" prop="assetStatus" width="80" />
            <el-table-column label="单据类型名称" prop="docTypeName" width="100" />
            <el-table-column label="摊提方法" prop="amortizationMethod" width="100" />
            <el-table-column label="取得时间" prop="getDate" width="100" />
            <el-table-column label="记账时间" prop="bookkeepingDate" width="100" />
            <el-table-column label="期间" prop="period" width="100" />
            <el-table-column label="开始摊提日期" prop="startAmortizationDate" width="100" />
            <el-table-column label="处置/转换期" prop="handleConversionDate" width="100" />
            <el-table-column label="摊提状态" prop="amortizationStatus" width="80" />
            <el-table-column label="责任部门名称" prop="responsibilityDepartmentName" width="100" />
            <el-table-column label="来源类型" prop="sourceType" width="100" />
            <el-table-column label="来源单据" prop="sourceDocNo" width="100"></el-table-column>
            <el-table-column label="来源序号" prop="sourceSeq" width="100"></el-table-column>
            <el-table-column label="来源日期" prop="sourceDate" width="100"></el-table-column>
            <el-table-column label="状态" prop="approveStatus" width="50"></el-table-column>
            <el-table-column label="审核日期" prop="approveDate" width="100"></el-table-column>
            <el-table-column label="创建者编号" prop="createUserNo" width="100"></el-table-column>
            <el-table-column label="创建者姓名" prop="createUserName" width="100"></el-table-column>
            <el-table-column label="创建日期" prop="createDate" width="100"></el-table-column>
            <el-table-column label="最后修改编号" prop="lastModifyUserNo" width="100"></el-table-column>
            <el-table-column label="最后修改姓名" prop="lastModifyUserName" width="100"></el-table-column>
            <el-table-column label="最后修改日期" prop="lastModifyDate" width="100"></el-table-column>
            <el-table-column label="修改人编号" prop="modifyUserNo" width="100"></el-table-column>
            <el-table-column label="修改人姓名" prop="modifyUserName" width="100"></el-table-column>
            <el-table-column label="修改日期" prop="modifyDate" width="100"></el-table-column>
            <el-table-column label="是否历史数据" prop="history" width="100"></el-table-column>
            <el-table-column label="操作" class-name="fixed-width" width="200" fixed="right">
                <template slot-scope="scope">
                    <el-button size="small" plain type="primary" icon="el-icon-printer"
                        @click="handleRowPrint(scope.row)" v-hasPermi="['system:index:print']"
                        style="padding: 5px;">打印</el-button>
                    <el-button size="small" plain type="primary" icon="el-icon-edit" @click="handleRowEdit(scope.row)"
                        v-hasPermi="['system:index:edit']" style="padding: 5px;">编辑</el-button>
                    <el-button size="small" plain type="danger" icon="el-icon-delete"
                        @click="handleRowDelete(scope.row)" v-hasPermi="['system:index:del']"
                        style="padding: 5px;">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.limit"
            @pagination="getAssetList" />
        <addtion-dialog :formData="addtionDialogData" v-if="addtionDialogVisible" :dialogVisible="addtionDialogVisible"
            @close="onAddtionDialogClose">
        </addtion-dialog>
        <print-dialog :printList="printDataList" v-if="printDialogVisible" :visible="printDialogVisible"
            @close="onPrintDialogClose">
        </print-dialog>
    </div>
</template>

<script>
import request from '@/utils/request'
import addtionDialog from './components/addtionDialog.vue'
import printDialog from './components/printDialog.vue'

export default {
    name: "assetIndex"
    , components: {
        addtionDialog
        , printDialog
    }
    , data() {
        return {
            queryParams: {
                page: 1
                , limit: 10
                , assetNo: ''
                , assetName: ''
                , responsibilityDepartmentName: '' // 部门名称
                , period: '' // 期间
            }
            , total: 0
            , showSearch: true
            , loading: false
            , tableData: []
            , selects: []
            , addtionDialogVisible: false
            , addtionDialogData: {}
            , printDialogVisible: false
            , printDataList: []
        }
    }
    , methods: {
        getAssetList() {
            this.loading = true;
            request({
                url: '/asset/select'
                , method: 'get'
                , params: this.queryParams
            }).then(res => {
                if (res.code === 200) {
                    this.tableData = res.data.data
                    this.total = res.data.total
                } else {
                    this.$message.error(res.msg)
                }
                this.loading = false;
            })
                .catch(err => {
                    console.log(err)
                    this.$modal.msgError(err)
                    this.loading = false;
                })
        }
        , init() {
            this.getAssetList();
        }
        , handleQuery() {
            this.getAssetList();
        }
        , resetQuery() {
            this.queryParams = {
                page: 1
                , limit: 10
                , assetNo: ''
                , assetName: ''
                , responsibilityDepartmentName: '' // 部门名称
                , period: '' // 期间
            }
            this.getAssetList();
        }
        , handleAdd() {
            this.addtionDialogData = {};
            this.addtionDialogVisible = true;
        }
        , handleBatchPrint() {
            if (this.printDataList.length === 0) {
                this.$modal.msgWarning("请选择需要打印的数据项。");
                return;
            }
            if (this.printDataList.length > 20) {
                this.$modal.alertWarning("一次最多可打印20条数据。");
                return;
            }
            this.printDialogVisible = true;
        }
        , handleSelectionChange(selects) {
            this.selects = [];
            this.printDataList = [];
            if (selects && selects.length !== 0) {
                this.selects = selects.map(sl => sl.assetNo);
                this.printDataList = selects.map(sl => sl);
            }

        }
        , handleRowPrint(row) {
            this.printDataList = [];
            this.printDataList.push(row);
            this.printDialogVisible = true;
        }
        , handleRowEdit(row) {
            this.addtionDialogData = row;
            this.addtionDialogVisible = true;
        }
        , handleRowDelete(row) {
            this.$modal.confirm('是否确认删除资产编号为"' + row.assetNo + '"的数据项？').then(function () {
                return request({
                    url: '/asset/delete/' + row.assetNo
                    , method: 'delete'
                })
            }).then((res) => {
                if (res && res.code === 200) {
                    this.getAssetList();
                    this.$modal.msgSuccess("删除成功。");
                } else {
                    this.$modal.msgError(res.msg);
                }
            }).catch((e) => {
                console.log(e);
            });
        }
        , onAddtionDialogClose(isDataModify) {
            this.addtionDialogVisible = false;
            this.addtionDialogData = {};
            if (isDataModify)
                this.getAssetList();
        }
        , onPrintDialogClose() {
            this.printDialogVisible = false;
            this.printDataList = [];
            if (this.selects && this.selects.length!== 0)
                this.getAssetList();
            this.selects = [];
        }

    }
    , mounted() {
        this.init();
    }
}

</script>

<style scoped></style>